<template>
   <div>
      <!-- 头部 -->
      <div class="title flex">
         <div class="news">消息({{5}})</div>
         <button class="fun flex">
               <font-awesome-icon icon="brush" class="icon"/>
               <div>清空</div>
         </button>
      </div>
       
       <!-- 搜索 -->

      <button v-for="item in informData" :key="item.id" class="informOne" >
          <div class="box">
             <font-awesome-icon :icon="item.icon" class="icon" :style="getStyle(item.id)"/>
             <div >{{item.label}}</div>
          </div>
      </button>


   </div>
</template>
<script>
  export default 
  {
     name :'', 
     data() {
        return {
            informData:[
                {id:1555555,label:'赞和收藏', icon:'heart',color:'red',background:'#ffebef'},
                {id:2,label:'评论',icon:'comments',color:'#42d39c',background:'#e7fbef'},
                {id:3,label:'系统通知',icon:'volume-high',color:'#3986ff',background:'#e7efff'}
            ]
        }
     },
     methods:{
        getStyle(id){
            let {color,background} = this.informData.find(item => item.id == id)
            return{color,background,boxShaow:`0 0 5px ${color}`}
        }
     }
  }
</script>
<style scoped lang='less'>
.title{
    width: 100%;
    justify-content: space-between;
    margin-bottom: 20px;

    .news{
      font-size: 18px;
      color: black;
    }
    .fun{
      .icon{
        font-size: 15px;
        margin-right: 5px;
      }
       letter-spacing: 0;
      // color: black;
       color: var(--GeneralBackColor);
       font-size: 15px;
    }
}
.informOne{
    justify-content: flex-start;
    margin-bottom: 10px;
    width: 100px;
    .box{
      width: 100%;
    }
  .icon{
     width: 25px;
     height: 25px;
     padding: 10px;
     border-radius: 50%;
     margin-bottom: 5px;
  }
  div{
     letter-spacing: 0;
     font-size: 16px;
     width: 100%;
     text-align: center;
  }
}
</style>